<template>
  <div class="tab-cont tab-cont-notice">
    <div class="title lg:!px-0">
      <div class="row flexbox flex-align-center flex-justify-between">
        <h1 class="name">{{ $t('userPanel.notice') }}</h1>
      </div>
    </div>
    <div class="list md:grid-cols-2 grid flex-wrap grid-cols-1 gap-4">
      <div class="item !col-span-1 !w-auto !ml-0 !mb-0" v-for="item in noticeList" :key="item.id">
        <div class="info flexbox flex-align-center flex-justify-between cursor-pointer">
          <div class="order flexbox flex-align-center">
            <span class="label">
              {{ $t('userInfo.orderNo') }}
            </span>
            <span class="no" @click="goOrderPay(item)">{{ (item.order_info && item.order_info.order_no) || '' }}</span>
          </div>
          <span class="date text-nowrap">{{ item.create_time.split(' ')[0] }}</span>
        </div>
        <div class="cont">
          {{ item.message }}
          <!-- <div class="spot"></div> -->
        </div>
      </div>
    </div>
    <no-data type="notice" :loading="loading" v-if="noticeList.length == 0"></no-data>
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
        loading: true,
        noticeList: []
      }
    },
    computed: {},
    created() {
      this.getNoticeList()
    },
    methods: {
      getNoticeList() {
        this.$axios
          .get('/api/notification/index?page=1&limit=10')
          .then(res => {
            this.loading = false
            this.noticeList = res
          })
          .catch(err => {
            this.loading = false
            this.noticeList = []
          })
      },
      goOrderPay(item) {
        if (item.order_info && item.order_info.order_no) {
          this.$router.push({
            path: this.localePath('/order/pay'),
            query: {
              no: item.order_info.order_no //order_id
            }
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    padding: 20px 24px 12px 24px;
    .row {
      padding-bottom: 8px;
      border-bottom: @border-1-fo;
    }
    .name {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
    .btn {
      box-sizing: border-box;
      padding: 0;
      width: 58px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      color: @font-color-26;
      border-radius: 25px;
      border: none;
    }
  }
  .tab-cont {
    width: 100%;
    .filter {
      box-sizing: border-box;
      padding: 0 24px;
      height: 60px;
      border-bottom: @border-1-fo;
      .tabs {
        .tab {
          padding: 0 16px;
          font-size: 16px;
          color: @font-color-99;
          cursor: pointer;
        }
        .tab.active {
          position: relative;
          color: @theme-color;
        }
        .tab.active::before {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          bottom: -18px;
          width: 64px;
          height: 2px;
          background: @theme-color;
          transform: translateX(-50%);
        }
      }
    }
  }
  .tab-cont-notice {
    .list {
      margin-top: 8px;
      .item {
        width: 386px;
        margin-left: 20px;
        margin-bottom: 20px;
        .info {
          padding: 0 20px;
          height: 50px;
          background: @color-f7;
          border-radius: 16px 16px 0px 0px;
          .order {
            .label {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .no {
              margin-left: 6px;
              font-weight: 500;
              font-size: 14px;
              color: @theme-color;
            }
          }
          .date {
            font-weight: 500;
            font-size: 14px;
            color: #b3b3b3;
          }
        }
        .cont {
          padding: 32px 20px;
          font-size: 14px;
          color: @font-color-26;
          background: @color-ff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 16px 16px;
          .spot {
            display: none;
          }
        }
      }
      .item:nth-child(2n + 1) {
        margin-left: 0;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 8px;
      margin-bottom: 48px;
    }
    .tab-cont-notice {
      .list {
        margin-top: 16px;
        padding: 0 16px;
        .item {
          width: 100%;
          margin-left: 0px;
          margin-bottom: 16px;
          .info {
            padding: 0 12px;
            height: 40px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
          }
          .order {
            .label {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-14;
            }
            .no {
              font-weight: 500;
              font-size: 12px;
              color: @theme-color;
            }
            .date {
              font-weight: 400;
              font-family: HelveticaNeue;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .cont {
            position: relative;
            padding: 32px 12px;
            background: @color-ff;
            font-weight: 400;
            font-size: 14px;
            color: @font-color-26;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .spot {
              display: block;
              position: absolute;
              top: 32px;
              right: 16px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #ff4d4f;
            }
          }
        }
        .item:nth-child(2n + 1) {
          margin-left: 0;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 8px;
      margin-bottom: 48px;
    }
    .tab-cont-notice {
      .list {
        margin-top: 16px;
        padding: 0 16px;
        .item {
          width: 100%;
          margin-left: 0px;
          margin-bottom: 16px;
          .info {
            padding: 0 12px;
            height: 40px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
          }
          .order {
            .label {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-14;
            }
            .no {
              font-weight: 500;
              font-size: 12px;
              color: @theme-color;
            }
            .date {
              font-weight: 400;
              font-family: HelveticaNeue;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .cont {
            position: relative;
            padding: 32px 12px;
            background: @color-ff;
            font-weight: 400;
            font-size: 14px;
            color: @font-color-26;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .spot {
              display: block;
              position: absolute;
              top: 32px;
              right: 16px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #ff4d4f;
            }
          }
        }
        .item:nth-child(2n + 1) {
          margin-left: 0;
        }
      }
    }
  }
</style>
